<template>
  <div style="padding: 20px 250px">
    <div id="group-bar"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    initChart() {
      const data = [
        { name: "签收时效", 月份: "一月", 订单量: 18.9 },
        { name: "签收时效", 月份: "二月", 订单量: 28.8 },
        { name: "签收时效", 月份: "三月", 订单量: 39.3 },
        { name: "签收时效", 月份: "四月", 订单量: 81.4 },
        { name: "签收时效", 月份: "五月", 订单量: 47 },
        { name: "签收时效", 月份: "六月", 订单量: 20.3 },
        { name: "签收时效", 月份: "七月", 订单量: 24 },
        { name: "签收时效", 月份: "八月", 订单量: 35.6 },
        { name: "签收时效", 月份: "九月", 订单量: 12.4 },
        { name: "签收时效", 月份: "十月", 订单量: 23.2 },
        { name: "签收时效", 月份: "十一月", 订单量: 34.5 },
        { name: "签收时效", 月份: "十二月", 订单量: 99.7 },
        { name: "物流时效", 月份: "一月", 订单量: 1.9 },
        { name: "物流时效", 月份: "二月", 订单量: 8.8 },
        { name: "物流时效", 月份: "三月", 订单量: 9.3 },
        { name: "物流时效", 月份: "四月", 订单量: 8.4 },
        { name: "物流时效", 月份: "五月", 订单量: 7 },
        { name: "物流时效", 月份: "六月", 订单量: 0.3 },
        { name: "物流时效", 月份: "七月", 订单量: 44 },
        { name: "物流时效", 月份: "八月", 订单量: 65.6 },
        { name: "物流时效", 月份: "九月", 订单量: 15.4 },
        { name: "物流时效", 月份: "十月", 订单量: 83.2 },
        { name: "物流时效", 月份: "十一月", 订单量: 54.5 },
        { name: "物流时效", 月份: "十二月", 订单量: 19.7 },
        { name: "成单时效", 月份: "一月", 订单量: 68.9 },
        { name: "成单时效", 月份: "二月", 订单量: 38.8 },
        { name: "成单时效", 月份: "三月", 订单量: 89.3 },
        { name: "成单时效", 月份: "四月", 订单量: 83.4 },
        { name: "成单时效", 月份: "五月", 订单量: 57 },
        { name: "成单时效", 月份: "六月", 订单量: 50.3 },
        { name: "成单时效", 月份: "七月", 订单量: 64 },
        { name: "成单时效", 月份: "八月", 订单量: 65.6 },
        { name: "成单时效", 月份: "九月", 订单量: 62.4 },
        { name: "成单时效", 月份: "十月", 订单量: 73.2 },
        { name: "成单时效", 月份: "十一月", 订单量: 74.5 },
        { name: "成单时效", 月份: "十二月", 订单量: 39.7 },
      ];

      const chart = new Chart({
        container: "group-bar",
        autoFit: true,
        height: 500,
      });

      chart.data(data);
      chart.scale("订单量", {
        nice: true,
      });
      chart.tooltip({
        showMarkers: false,
        shared: true,
      });
      chart.legend({
        position: 'top-right',
        custom: true,
        items: [
          {
            value: "签收时效",
            name: "签收时效",
            marker: { symbol: "circle", style: { fill: "#83CFFF", r: 5 } },
          },
          {
            value: "物流时效",
            name: "物流时效",
            marker: { symbol: "circle", style: { fill: "#2D99FF", r: 5 } },
          },
          {
            value: "成单时效",
            name: "成单时效",
            marker: { symbol: "circle", style: { fill: "#A5F3FF", r: 5 } },
          },
        ]
      })
      chart
        .interval()
        .position("月份*订单量")
        .color("name",v=> {
          if(v==='签收时效') return '#83CFFF'
          else if(v==='物流时效') return '#2D99FF'
          else if(v==='成单时效') return '#A5F3FF'
        })
        .size(10)
        .label('订单量')
        .adjust([
          {
            type: "dodge",
            marginRatio: 0,
          },
        ]);

      chart.interaction("active-region");

      chart.render();
    },
  },
  mounted() {
    this.initChart();
  },
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
